<%--
  Created by IntelliJ IDEA.
  User: dzw
  Date: 2018/1/4
  Time: 14:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
  String _id=request.getParameter("_");
  String jsessionid = session.getId();
%>

<style>
  #showFlow li,span{
    margin: 0!important;
  }
</style>

<form id="form_leave_input" class="mui-input-group">

  <input type="hidden" name="keyId" id="keyId" value="${leave.id}"/>

  <div class="mui-input-row">
    <label>请假人员</label>
    <input disabled type="text" id="leaveUser" class="mui-input-clear" placeholder="请选择请假人员" value="${leave==null?user.name:leave.leaveUser.name}">
    <input type="hidden" id="leaveUserId" name="leaveUserId" value="${leave==null?user.id:leave.leaveUser.id}" />
  </div>

  <div class="mui-input-row">
    <label>请假类别</label>
    <input disabled type="text" id="leaveType" name="leaveType" class="mui-input-clear" placeholder="请选择请假类别" value="${leave.leaveType.name}">
    <input type="hidden" id="leaveTypeId" name="leaveTypeId" value="${leave.leaveType.id}" />
  </div>

  <div class="mui-input-row">
    <label>请假天数</label>
    <div id="leaveDayDiv" class="mui-numbox" data-numbox-step="1" data-numbox-min="0" >
      <button disabled class="mui-btn mui-btn-numbox-minus" type="button">-</button>
      <input disabled class="mui-input-numbox" type="number" id="leaveDayNum" name="leaveDayNum" value="${leave.leaveDayNum}" >
      <button disabled class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>
  </div>

  <div class="mui-input-row">
    <label>请假开始时间</label>
    <input disabled type="text" id="leaveStartDate" name="leaveStartDate" class="mui-input-clear" placeholder="请选择请假开始时间" value="<fmt:formatDate pattern="yyyy-MM-dd" value="${leave.leaveStartDate}" />">
  </div>

  <div class="mui-input-row">
    <label>请假结束时间</label>
    <input disabled type="text" id="leaveEndDate" name="leaveEndDate" class="mui-input-clear" placeholder="请选择请假结束时间" value="<fmt:formatDate pattern="yyyy-MM-dd" value="${leave.leaveEndDate}" />">
  </div>

  <div class="mui-input-row">
    <label>请假事由</label>
    <input disabled type="text" id="leaveReason" name="leaveReason" class="mui-input-clear" placeholder="请输入请假事由" value="${leave.leaveReason}" >
  </div>

  <h5 class="mui-content-padded">提交信息</h5>
  <div class="mui-input-row">
    <label>提交人</label>
    <input disabled type="text" class="mui-input-clear" value="${leave.creater.name}">
  </div>
  <div class="mui-input-row">
    <label>联系方式</label>
    <input disabled type="text" class="mui-input-clear" value="<fmt:formatDate pattern="yyyy-MM-dd" value="${leave.createTime}" />">
  </div>

  <c:if test='${leave.processState != "Finished" && leave.processState != "Deny"}'>
    <h5 class="mui-content-padded">下一步流程</h5>
    <div class="mui-input-row mui-radio">
      <label>归档</label>
      <input type="radio" id="nextNo" name="next" value="0">
    </div>
    <div class="mui-input-row mui-radio">
      <label>选择下一步操作人</label>
      <input type="radio" id="nextYes" name="next" value="1">
    </div>

    <div id="showNextStep" class="mui-input-row" style="display: none">
      <label>下一操作人</label>
      <input readonly type="text" id="editors" name="editors" class="mui-input-clear" placeholder="请选择下一步操作人">
      <input type="hidden" id="editorsId" name="editorsId">
    </div>
  </c:if>

</form>

<div class="mui-col-xs-12 mui-col-sm-12 flow">
  <button type="button" class="mui-btn" id="apply-re-common">返回</button>
  <button type="button" class="mui-btn mui-btn-primary" id="ajax_edit" ${userEdit}>编辑</button>
</div>

<div class="f_title"><span class="mui-icon mui-icon-arrowright" id="flow" style="font-size: 15px"></span>流程信息</div>
<div class="f_content" style="display:none">
  <div id="showFlow"></div>
</div>
<div class="f_title"><span class="mui-icon mui-icon-arrowright" id="next" style="font-size: 15px"></span>下一步骤提示</div>
<div class="f_content" style="display:none">
  <div id="showNext"></div>
</div>

<div class="mui-col-xs-12 mui-col-sm-12">

</div>

<script>

  var state = "${leave.processState}";
  var index = "${index}";
  var todo = "${todo}";
  var remind = "${remind}";
  var record = "${record}";
  var draft =  "${draft}";
  var stepNo = "${stepNo}";

  $(function(){
    loadURL("<%=path%>/com/running/newWorkflow?bussinessId="+$("input#keyId").val()+"&type=flow",$('#showFlow'));
    loadURL("<%=path%>/com/running/newWorkflow?bussinessId="+$("input#keyId").val()+"&type=next",$('#showNext'));
    if(state !=  "Finished" &&  state !=  "Deny"){
      __ajax_post("<%=path%>/com/running/newOperateType",{keyId: $("input#keyId").val()},function(pdata){
        var area = $("div.flow");
        $(pdata.datarows).each(function(i,v){
          var str = '<button id="left_foot_btn_'+ v.action+'" type="button" class="mui-btn mui-btn-warning">'+ v.name+'</button>&nbsp;';
          $(area).append(str);
        });

        //通过
        $("#left_foot_btn_approve").off("click").on("click",function(){
          if($(":checked[name='next']").length < 1){
            mui.toast("请先选择下一步流程");
            return false;
          }else if($(":checked[name='next']").val()==1 && $("#editorsId").val()==""){
            mui.toast("请先选择下一步审批人");
            return false;
          }
          var form_id="form_leave_input";
          var url="<%=path%>/mp/leave/approve";
          mp_approve(form_id,url);
        });

        //退回
        $("#left_foot_btn_sendback").off("click").on("click",function(){
          var keyId=$("#keyId").val();
          var vActionUrl="<%=path%>/mp/leave/back";
          mp_back(keyId,vActionUrl);
        });

        //否决
        $("#left_foot_btn_deny").off("click").on("click",function(){
          var vActionUrl="<%=path%>/mp/leave/deny";
          var keyId = $("input#keyId").val();
          mp_deny(keyId, vActionUrl);
        });
      });
    }

    //下一步点击
    $(':radio[name="next"]').click(function(){
      if($(this).val() == "1"){
        $('#showNextStep').show();
      }else{
        $('#showNextStep').hide();
      }
    });

    //流程信息展开
    var flow=document.getElementById("flow");
    var next=document.getElementById("next");
    flow.addEventListener('tap',function(){
      if($(this).hasClass("mui-icon-arrowright")){
        $(this).removeClass("mui-icon-arrowright").addClass("mui-icon-arrowdown");
        $(this).parent(".f_title").next("div.f_content").show();
      }else{
        $(this).removeClass("mui-icon-arrowdown").addClass("mui-icon-arrowright");
        $(this).parent(".f_title").next("div.f_content").hide();
      }
    });

    next.addEventListener('tap',function(){
      if($(this).hasClass("mui-icon-arrowright")){
        $(this).removeClass("mui-icon-arrowright").addClass("mui-icon-arrowdown");
        $(this).parent(".f_title").next("div.f_content").show();
      }else{
        $(this).removeClass("mui-icon-arrowdown").addClass("mui-icon-arrowright");
        $(this).parent(".f_title").next("div.f_content").hide();
      }
    });

  });

  $("#editors").click(function(){
    __ajax_get("<%=path%>/main/member/list",null,function(data){
      var userArr=data.dataRows;
      var arr=new Array();
      for(var i=0;i<userArr.length;i++){
        var user={"value":userArr[i].id,"text":userArr[i].name};
        arr.push(user);
      }
      var picker = new mui.PopPicker();
      picker.setData(arr);
      picker.show(function (selectItems){
        $("#form_leave_input #editors").val(selectItems[0].text);
        $("#form_leave_input #editorsId").val(selectItems[0].value);
        $("#editors").blur();
      });
    });
  });

  //返回视图
  $("#apply-re-common").click(function(){
//    if(index==1){
//      loadURL("menu/dashboard",$('#page-content'));
//    }else if(todo==1){
//      loadURL("menu/toDo",$('#page-content'));
//    }else if(remind==1){
//      loadURL("menu/remind",$('#page-content'));
//    }else if(record==1){
//      loadURL("menu/taskRecord?type=1",$('#page-content'));
//    }else if(record==2){
//      loadURL("menu/taskRecord?type=2",$('#page-content'));
//    }else if(draft==1){
//      loadURL("menu/draft",$('#page-content'));
//    }else{
      loadURL("menu/com/leave?viewtype=2",$('#page-content'));
//    }
  });

  //编辑
  $("#ajax_edit").click(function(){
    loadURL("<%=path%>/mp/leave/input?keyId="+$("input#keyId").val()+"&draft="+draft+"&todo="+todo+"&remind="+remind+"&record="+record+"&index="+index,$('#page-content'));
  });

  function mp_back(keyId,vActionUrl){
    __ajax_get("<%=path%>/mp/leave/getBackInfo",{keyId:keyId},function(data){
      var list=data.data;
      if($("#sendBack").size()>0){
        $("#sendBack").remove();
      }
      if($("#sendBack").size()==0){
        var newOp = '<div id="sendBack" class="mui-popover"><h5 class="mui-content-padded">选择退回步骤</h5>';
        for(var i=0;i<list.length;i++){
          newOp += '<div class="mui-input-row mui-radio">'
          +'<label>第'+(i+1)+'步，操作人：'+list[i].name+'</label>'
          +'<input type="radio" id="backStepNo'+(i+1)+'" name="backStepNo" value="'+(i+1)+'|'+list[i].id+'">'
          +'</div>';
        }
        newOp += '<h5 class="mui-content-padded">输入退回理由</h5>'
        +'<div class="mui-input-row">'
        +'<textarea id="editor" name="editor" rows="3" placeholder="退回理由" style="margin-bottom: 0"></textarea>'
        +'</div>'
        +'<div class="mui-button-row" style="margin-bottom: 10px">'
        +'<button id="mpBack" type="button" class="mui-btn mui-btn-primary">确认</button>&nbsp;&nbsp;'
        +'<button type="button" class="mui-btn mui-btn-danger" onclick="closePop(\'sendBack\')">取消</button>'
        +'</div>'
        +'</div>';
        $("body").append(newOp);
      }
      mui('#sendBack').popover('toggle');

      $("#mpBack").off("click").on("click",function(){
        if($(':checked[name="backStepNo"]').length < 1){
          mui.toast("请选择退回步骤");
          return false;
        }
        if($("#sendBack #editor").val()==""){
          mui.toast("请填写退回理由");
          return false;
        }
        mui('#sendBack').popover('hide');
        var comment=$("#editor").val();
        var backStepNo=$(':checked[name="backStepNo"]').val();
        __ajax_post(vActionUrl+"?comment="+comment+"&backStepNo="+backStepNo+"&keyId="+keyId,null,function(pdata){
          mui.toast(pdata.message);
          $("#apply-re-common").trigger("click");
        });
      });
    });
  }

  function mp_approve(form_id,url){
    if($("#sendApprove").size()>0){
      $("#sendApprove").remove();
    }
    var newOp = '<div id="sendApprove" class="mui-popover">'
            +'<h5 class="mui-content-padded">输入审批意见</h5>'
            +'<div class="mui-input-row">'
            +'<textarea id="editor" name="editor" rows="3" placeholder="审批意见" style="margin-bottom: 0"></textarea>'
            +'</div>'

            +'<div class="mui-button-row" style="margin-bottom: 10px">'
            +'<button id="mpApprove" type="button" class="mui-btn mui-btn-primary">确认</button>&nbsp;&nbsp;'
            +'<button type="button" class="mui-btn mui-btn-danger" onclick="closePop(\'sendApprove\')">取消</button>'
            +'</div>';
    $("body").append(newOp);
    mui('#sendApprove').popover('toggle');

    $("#mpApprove").off("click").on("click",function(){
      if($("#sendApprove #editor").val()==""){
        mui.toast("请先填写审批意见");
        return false;
      }
      mui('#sendApprove').popover('hide');
      var comment=$("#sendApprove #editor").val();
      __form_save(form_id, url+"?comment="+comment, function(data){
        $("#apply-re-common").trigger("click");
        mui.toast(data.message);
      });
    });
  }

  function mp_deny(keyId, vActionUrl){
    if($("#sendDeny").size()>0){
      $("#sendDeny").remove();
    }
    var newOp = '<div id="sendDeny" class="mui-popover">'
            +'<h5 class="mui-content-padded">输入否决意见</h5>'
            +'<div class="mui-input-row">'
            +'<textarea id="editor" name="editor" rows="3" placeholder="否决意见" style="margin-bottom: 0"></textarea>'
            +'</div>'

            +'<div class="mui-button-row" style="margin-bottom: 10px">'
            +'<button id="mpDeny" type="button" class="mui-btn mui-btn-primary">确认</button>&nbsp;&nbsp;'
            +'<button type="button" class="mui-btn mui-btn-danger" onclick="closePop(\'sendDeny\')">取消</button>'
            +'</div>';
    $("body").append(newOp);
    mui('#sendDeny').popover('toggle');

    $("#mpDeny").off("click").on("click",function(){
      if($("#sendDeny #editor").val()==""){
        mui.toast("请先填写否决意见");
        return false;
      }
      mui('#sendDeny').popover('hide');
      var comment=$("#sendDeny #editor").val();
      __ajax_post(vActionUrl+"?comment="+comment+"&keyId="+keyId,null,function(pdata){
        mui.toast(pdata.message);
        $("#apply-re-common").trigger("click");
      });

    });
  }

  function closePop(popId){
    mui("#"+popId+"").popover('hide');
  }

</script>